import React, { PureComponent } from 'react';
import { Icon, Table, Input, Button, Form, notification } from 'antd';
import { connect } from 'dva';
import { worker } from "../../utils/worker"
import "./form.less"
import "../../Common.less"
class CrossSectionList extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            mass: false,
            selectActive: true,
            bridgeList: [],
            selectedRowKeys: [],
            data: [],
            count: 0,
            name: "",
            columns: [],
            allChecked: false,
            st: null,
            qString: "",
            pagination: {
                pageSize: 10,
                pageNum: 1
            },
            loading: false,
            total: 0,
        }
        this.getData = this.getData.bind(this);
        this.editComponent = this.editComponent.bind(this);
        this.onSelect = this.onSelect.bind(this)
        this.onSelectChange = this.onSelectChange.bind(this)
        this.onConfirm = this.onConfirm.bind(this)
        this.refresh = this.refresh.bind(this)
        this.massDelete = this.massDelete.bind(this)
        this.queryData=this.queryData.bind(this)
        this.addCrossSection=this.addCrossSection.bind(this)

    }

    editComponent(e, item) {
        const {modalContext}=this.props;
        let { operateType, bridgeId, selectedRowKeys } = this.state;
        this.setState({
            mass: false,
            spanId: item.id
        })
        if (modalContext) {
            modalContext.updateModal({
                visible: true,
                title: "选择构件",
                event: { code: "structureSelect" },
                extra: {
                    "nodeType": 4,
                    operateType: 'cusProps',
                    selectionOrSpanIds: [item.id],
                    definitionIds: selectedRowKeys,
                    bridgeId,
                    ids: item.definitionIds ? item.definitionIds : [],
                    type: "bottom",
                    spanType: item.spanType
                }
            });
        }
    }
    async getData() {
        this.setState({
            loading: true
        })
        const { structureTree } = this.props;
        let { selectAll, selectedRowKeys, sid } = this.state;
        let { bridgeId } = this.state;
        if (!bridgeId) {
            return;
        }
        let res = await this.props.getBotStructuresByBridge({ bridgeId, sid })
        let extra = {};
        if (res && res.rows && res.rows.length) {
            const len = res.rows.length;
            for (let i = 0; i < len; i++) {
                const item = res.rows[i];
                if (item.definitionTreeIds && item.definitionTreeIds.length) {
                    let arr = []
                    const len2 = item.definitionTreeIds.length
                    for (let i = 0; i < len2; i++) {
                        let item2 = item.definitionTreeIds[i];
                        const obj = await worker.getTreeNode(structureTree, item2)
                        arr.push({
                            definitionTreeId: item2,
                            title: obj.title,
                            code: obj.code
                        })
                    }
                    item.structures = arr;
                }
                item.checked = false;
                item.edit = false;
                if (selectAll) {
                    selectedRowKeys.push(item.id)
                }
            }
            extra.selectedRowKeys = selectedRowKeys
            this.setState({
                loading: false,
                selectAll: false,
                originalData: res ? res.rows : [],
                data: res ? res.rows : [],
                total: res ? res.total : 0,
                ...extra
            })
        } else {
            this.setState({
                loading: false,
                originalData: [],
                data: [],
                total: 0
            })
        }
    }
    onConfirm(params) {
        return new Promise((resolve, reject) => {
            let selectionOrSpanIds = []
            const {treeContext}=this.props;
            let { selectedRowKeys, data, bridgeId, operateType } = this.state;
            if (data && data.length) {
                if (selectedRowKeys && selectedRowKeys.length) {
                    const len = data.length;
                    const len2 = selectedRowKeys.length;
                    for (let i = 0; i < len; i++) {
                        let item = data[i];
                        for (let j = 0; j < len2; j++) {
                            let item2 = selectedRowKeys[j];
                            if (item.id == item2) {
                                selectionOrSpanIds.push(item.id)
                            }
                        }
                    }
                }

            }

            this.props.addDefinitionInstance({
                operateType: operateType || "cover",
                selectionOrSpanIds,
                definitionIds: selectedRowKeys,
                bridgeId,
                "type": "bottom"
            }, res => {
                if (res && res.length) {
                    const len = res.length;
                    for (let i = 0; i < len; i++) {
                        let obj = res[i];
                        if (obj.data && obj.data.length) {
                            const len2 = obj.data.length;
                            for (let i = 0; i < len2; i++) {
                                let unit = obj.data[i];
                                let { definitionInstances, selectionOrSpanId } = unit;
                                if (definitionInstances && definitionInstances.length) {
                                    const len3 = definitionInstances.length
                                    for (let i = 0; i < len3; i++) {
                                        let item = definitionInstances[i];
                                        item.title = item.instanceName;
                                        item.key = 'botStructureComponentUnit' + item.id;
                                        item.type = "bottom"
                                        item.eventType = 'botStructureComponentUnit'
                                        item.eventKey = 'botStructureComponentUnit'
                                        item.checkable = true
                                        item.selectable = true
                                        item.isLeaf = true
                                    }
                                }
                                // botStructureDirec
                                if (operateType && operateType == "add") {
                                    treeContext.insertTreeNode("botStructureDirec" + selectionOrSpanId, definitionInstances)

                                } else {
                                    treeContext.updateTreeNode("botStructureDirec" + selectionOrSpanId, definitionInstances)

                                }
                            }
                        }

                    }
                }

                resolve()
            }, err => {
                reject()
            })
        })
    }
    refresh() {
        this.setState({
            selectedRowKeys: []
        })
        this.getData()
    }
    async deleteTemp(e, item) {
        e.persist();
        e.preventDefault()
        const selectedRowKeys = [item.id]

    }
    async componentDidMount() {

        if (this.props.onLoaded) {
            this.props.onLoaded(this);
        }

        const columns = [
            {
                title: '名称',
                dataIndex: 'name',
                width: "120",
            },
            {
                title: '分类',
                dataIndex: 'name',
                width: "100",
            },
            {
                title: '状态',
                dataIndex: 'name',
                width: "60",
            },
            {
                title: '描述',
                dataIndex: 'name',
                width: "100",
            },
            {
                title: '属性1',
                dataIndex: 'name',
                width: "100",
            },
            {
                title: '属性2',
                dataIndex: 'name',
                width: "100",
            },
            {
                title: '属性3',
                dataIndex: 'name',
                width: "100",
            },
            {
                title: '创建时间',
                dataIndex: 'createTime',
                width: "150px",
            },
            {
                title: '操作',
                key: 'action',
                width: "250px",
                render: (text, record) => <span className="operate"><a onClick={(e) => this.editComponent(e, record)}><Icon type="edit" />&nbsp;编辑</a><a style={{ marginLeft: "5px" }} onClick={(e) => this.deleteTemp(e, record)}><Icon type="edit" />&nbsp;删除</a></span>,
            },
        ];
        this.setState({
            columns
        })
    }
    addCrossSection(e){
        e.preventDefault()
        let { modalContext } = this.props;
        modalContext.updateModal({
            visible: true,
            title: "截面库",
            event: { code: "crossSectionDetail" },
            extra: {
               width:800
            }
        })
    }
    onSelectChange = selectedRowKeys => {
        this.setState({ selectedRowKeys });
    };
    async onSelect(e) {
        await this.setState({
            bridgeId: e
        })
        this.getData()
    }

    massDelete(e) {
        e.persist();
        e.preventDefault()
        if (!selectedRowKeys || !selectedRowKeys.length) {
            notification.warn({ message: "至少选择一个布跨!" })
            return;
        }
    }
    queryData(){
       
    }
    render() {
        let { columns, data, loading, selectedRowKeys, selectActive, treeData } = this.state
        const {  commondShow } = this.props;
        const { getFieldDecorator } = this.props.form;
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
        };
        return (
            <div className="absMiddle topComponent">
                <div className="absMiddle" style={{width:"100%",padding:"0 15px"}}>
                    <Form style={{ padding: "15px 15px" }}
                        labelCol={{ span: 7 }}
                        wrapperCol={{ span: 17 }}
                        layout="inline"

                    >
                        <Form.Item style={{ alignItems: "center" }} label='截面库'>
                            {getFieldDecorator('designStage', {
                                rules: [
                                    { required: true, message: '截面库名称' }
                                ],
                                initialValue: ""
                            })(
                                <Input></Input>
                            )}
                        </Form.Item>
                        <Form.Item style={{ alignItems: "center" }} label=''>
                            <Button onClick={this.queryData} type="primary">查询</Button>
                        </Form.Item>
                        

                    </Form>
                    <div className="btnBox">
                    <Button onClick={e => this.addCrossSection(e)} style={{ background: '#1890ff', borderColor: '#1890ff' }} type="primary">添加截面库</Button>
                            <Button disabled={!selectedRowKeys.length} onClick={e => this.massDelete(e)} style={{ background: '#1890ff', borderColor: '#1890ff' }} type="primary">批量删除</Button>

                        </div>
                </div>
                <Table loading={loading} scroll={{ y: commondShow ? 280 : 360 }} className="absMiddle" rowSelection={selectActive ? rowSelection : false} pagination={false} rowKey={record => record.id} loading={loading} columns={columns} dataSource={data} />
            </div>
        );
    }
}

export default connect(
    ({
        dict: { dictlist },

    }) => {
        return { dictlist };
    },
    dispatch => ({


    })
)(Form.create('CrossSectionList', {

})(CrossSectionList));